<template>
    <div class="page">
        <search-box/>
        <swiper :options="imgs"/>
        <gossip-number-item v-for="(item, key) in gossip" :key="key" :data="item" @onclick="handleToDetail"/>
    </div>
</template>

<script>

    import {study} from 'api'

    export default {
        data() {
            const imgs = Array(4).fill('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536523566399&di=f2056ec1199b996c5b3f8b4e2137158f&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa9d3fd1f4134970aac6a290c98cad1c8a7865df3.jpg');
            return {
                imgs,
                gossip: []
            }
        },
        created(){
            this.$axios.get(study.API_GOSSIP_LIST).then(({data = {}})=>{
                const {list} = data;
                this.gossip = list.map(o=>{
                    return {
                        id: o.id,
                        src: o.userLogo,
                        name: o.userName,
                        see: 123,
                        date: new Date(o.createdAt).toAppTime(true),
                        content: o.content,
                        imgs: [o.picture],
                        likeCount: o.likeCount,
                        commentCount: o.commentCount
                    }
                })
            })
        },
        methods: {
            handleToDetail({id = 'id'}){
                this.$router.push('/study/gossipDetail/' + id);
            }
        }
    }
</script>